import { useEffect } from 'react'
import { Button, Input,Modal,Form } from "antd";
import PropTypes from 'prop-types';
Amodal.propTypes = {
    isModalOpen: PropTypes.bool.isRequired,
    handleOk: PropTypes.func.isRequired,
    handleCancel: PropTypes.func.isRequired,
    onFinish: PropTypes.func.isRequired,
    onForm: PropTypes.func.isRequired,};
function Amodal(props) {    
    const [form] = Form.useForm();
    useEffect(()=>{
        props.onForm(form)
    })
  return (
    <div>
      <Modal
          title="手机号登录"
          open={props.isModalOpen}
          onOk={props.handleOk}
          onCancel={props.handleCancel}
          footer={null}
        >
          <Form
            name="basic"
            form={form}
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            style={{
              maxWidth: 600,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={props.onFinish}
            autoComplete="off"
          >
            <Form.Item
              label="手机号"
              name="username"
              rules={[
                {
                  required: true,
                  message: "请输入您的手机号!",
                },
              ]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: "输入6-30位密码!",
                },
              ]}
            >
              <Input.Password />
            </Form.Item>
            <Form.Item label={null}>
              <Button
                style={{ width: "100%" }}
                type="primary"
                htmlType="submit"
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </Modal>
    </div>
  )
}

export default Amodal